<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <title>菜品详情</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/food.css" rel="stylesheet">
</head>
<body>
<div class="main">
    <!-- 返回按钮 -->
    <div class="back_btn" onclick="history.go(-1);"></div>
    <!-- 菜品图片 -->
    <div class="main_up container-fluid">
        <div class="banner row">
            <ul>
                <li><img src="../imgs/2.jpg" alt=""/></li>
                <li><img src="../imgs/2.jpg" alt=""/></li>
                <li><img src="../imgs/1.jpg" alt=""/></li>
            </ul>
        </div>

        <!-- 菜品名称和价格 -->
        <div class="info row">
            <div class="food_info padding_left0">
                <div class="food_info_up">
                    <!-- 菜品名称 -->
                    <div class="food_name title_font">
                        香酥鸡腿香酥鸡腿香酥鸡腿香酥鸡腿 6个/袋
                    </div>
                    <!-- 库存数量 -->
                    <div class="food_stock">
                        库存 <span class="count">200</span> 份
                    </div>
                </div>

                <div class="food_info_down row">
                    <!-- 价格 -->
                    <div class="food_price col-xs-8">
                        ￥<span class="price">15.0</span>
                    </div>
                    <!-- 加入购物车 -->
                    <div class="add_car col-xs-4 action">
                        <!-- 减少 -->
                        <span class="subtract col-xs-3"></span>
                        <!-- 数量 -->
                        <span class="count col-xs-6">20</span>
                        <!-- 增加 -->
                        <span class="add col-xs-3"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="div_gap"></div>
        <!-- 商品详情 -->
        <div class="detail row">

            <div class="">
                <div class="title title_font">
                    商品详情
                </div>
                <div class="content ">
                    100字的商品详情介绍。100字的商品详情介绍。100字的商品详情介绍。100字的商品详情介绍。100字的商品详情介绍。100字的商品详情介绍。100字的商品详情介绍
                </div>
            </div>
        </div>
        <div class="div_gap"></div>
        <!-- 商品评价 -->
        <div class="evaluate row">
            <div>
                <div class="title title_font">
                    商品评价
                </div>
                <div class="no_comment hidden">
                    暂无评价
                </div>
                <!-- 赞 踩 -->
                <div class="vote row">
                    <div class="row">
                        <div class="good col-xs-6">
                            <span class="vote_icon vote_icon_good"></span>
                            <span class="num">11</span>
                        </div>
                        <div class="bad col-xs-6">
                            <span class="vote_icon vote_icon_bad"></span>
                            <span class="num">3</span>
                        </div>
                    </div>

                    <div class="row percent">
                        <div class="good_bg">
                            <div></div>
                        </div>
                        <div class="bad_bg"></div>
                    </div>

                </div>
            </div>
        </div>
        <div class="div_gap"></div>

        <!-- 全部评论 -->
        <div class="comments row list">
            <div class="row condition">
                <span class="col-xs-3 condition_all active">全部</span>
                <span class="col-xs-3 condition_good">赞</span>
                <span class="col-xs-3 condition_bad">踩</span>
            </div>
            <!-- 评论 -->
            <div class="row">
                <!-- 头像 -->
                <div class="pic ">
                    <img src="../imgs/2.jpg" alt=""/>
                </div>
                <div class="comment">
                    <div class="row">
                        <!-- 赞 或者 踩 -->
                        <div class="good col-xs-2">赞</div>
                        <!-- 时间 -->
                        <div class="comment_time col-xs-10">2016-05-03</div>
                    </div>
                    <!-- 评论内容 -->
                    <div class="row ">
                        <div class="comment_content col-xs-12 ">
                            评论内容评论内容评论内容评论内容评论（50个字符）
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- 头像 -->
                <div class="pic ">
                    <img src="../imgs/2.jpg" alt=""/>
                </div>
                <div class="comment">
                    <div class="row">
                        <!-- 赞 或者 踩 -->
                        <div class="bad col-xs-2">踩</div>
                        <!-- 时间 -->
                        <div class="comment_time col-xs-10">2016-05-03</div>
                    </div>
                    <!-- 评论内容 -->
                    <div class="row ">
                        <div class="comment_content col-xs-12 ">
                            评论内容
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer container-fluid">
        <div class="checkbox J_shopping_car_btn"></div>
        <div class="row">
            <div class="shopping_car col-xs-8 empty">
                <div class="row">
                    <!-- 购物车图标 -->
                    <div class="shopping_car_icon col-xs-3">
                        <!-- 总数量 -->
                        <div class="food_amount">0</div>
                    </div>
                    <!-- 金额 -->
                    <div class="shopping_car_amount col-xs-8">￥0</div>
                    <div class="shopping_car_amount_empty col-xs-8">空空的~</div>
                </div>
            </div>
            <a href="buy.html">
                <div class="buy col-xs-4">
                    下单
                </div>
            </a>
        </div>
    </div>

    <div class="bg_cover shopping_car_pop">
        <div class="goods_list container-fluid shopping_car_list">
            <div class="row title goods_list_title">
                <div class="goods_list_title_text">购物车</div>
                <div class="clear_car">
                    <span class="clear_car_icon">
                        <img src="../imgs/ic_clean.png" alt=""/>
                    </span>
                    <span class="clear_car_text"> 清空 </span>
                </div>
            </div>

            <div class="list container-fluid goods_list_item">
                <div class="row">
                    <div class="col-xs-5">香酥鸡腿</div>
                    <div class="col-xs-3 price_font price">¥ 15</div>
                    <!-- 操作 -->
                    <div class="action col-xs-4">
                        <!-- 减少 -->
                        <span class="subtract col-xs-3"></span>
                        <!-- 数量 -->
                        <span class="count col-xs-6">2</span>
                        <!-- 增加 -->
                        <span class="add col-xs-3"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/commen/zepto.js">
</script>
<script src="../js/food.js"></script>
<script src="../js/foodList.js">
</script>
</body>
</html>